<template>
  <div class="result-image-container" v-if="resultImg">
    <van-image v-if="resultImg" class="result img" fit="contain" :src="resultImg"></van-image>
    <div class="overlap-container">
      <svg style="width: 100%; height: 100%" :viewBox="overlapViewBox">
        <circle v-for="(p, idx) in filteredLandmarks"
                :r="p.radius ? p.radius : r"
                :key="`landmark_${idx}`"
                :fill-opacity="p.radius ? 1 : 0.6"
                :fill="p.radius ? 'yellow' : 'red'"
                :cx="`${p.x}px`"
                :cy="`${p.y}px`"
        ></circle>
        <text v-for="(p, idx) in landmarkLabels"
              :key="`label_lm_${idx}`"
              fill="red"
              :font-size="r * 10"
              :x="p.x + r * 2"
              :y="p.y + r * 12"
        >{{p.label}}</text>
        <rect
          v-for="(rect, idx) in filteredRects"
          :key="`rect_${idx}`"
          stroke="blue"
          fill="none"
          :stroke-width="r / 2"
          :x="rect.x"
          :y="rect.y"
          :width="rect.width"
          :height="rect.height"
        ></rect>
        <text v-for="(p, idx) in rectLabels"
              :key="`label_rect_${idx}`"
              fill="red"
              :font-size="r * 10"
              :x="p.x + r * 2"
              :y="p.y + r * 12"
        >{{p.label}}</text>
        <line
          v-for="(l, idx) in filteredLines"
          :key="`line_${idx}`"
          :stroke-width="r / 2"
          stroke="red"
          :x1="l.start.x"
          :y1="l.start.y"
          :x2="l.end.x"
          :y2="l.end.y"
        ></line>
         <!-- <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" /> -->
      </svg>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { deviceWidth } from '@/utils/rem'

@Component({
  name: 'ImageResult',
  components: {}
})
export default class ImageResult extends Vue {
  @Prop()
  resultImg!: string

  @Prop()
  landmarks?: any[]

  @Prop()
  rects?: any[]

  @Prop()
  lines?: any[]

  overlapViewBox = '0 0 400 400'
  r = 5

  get filteredLandmarks () {
    return this.landmarks?.filter(v => v !== null && !(v.x === 0 && v.y === 0))
  }

  get landmarkLabels () {
    return this.landmarks?.filter(v => v !== null && v.label && !(v.x === 0 && v.y === 0))
  }

  get filteredRects () {
    return this.rects?.filter(v => v !== null)
  }

  get rectLabels () {
    return this.rects?.filter(v => v !== null && v.label)
  }

  get filteredLines () {
    return this.lines?.filter(
      v => v !== null &&
        !(v.start.x === 0 && v.start.y === 0) &&
        !(v.end.x === 0 && v.end.y === 0))
  }

  updateRadius () {
    if (this.resultImg) {
      const _img = new Image()
      _img.src = this.resultImg
      _img.onload = () => {
        const r = _img.width / deviceWidth()
        this.r = Math.round(r * 2)
        this.overlapViewBox = `0 0 ${_img.width} ${_img.height}`
      }
    }
  }

  mounted () {
    this.updateRadius()
  }

  updated () {
    this.updateRadius()
  }
}
</script>

<style scoped lang="less">
.result-image-container {
  position: relative;
}
.result {
  display: flex;
}
.overlap-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
